<template>
<div class="content-tabs">
  <button class="roll-nav roll-left">
    <i class="icon iconfont icon-backward"></i>
  </button>
  <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      size="small"
      :closable="true"
      :disable-transitions="false"
      @close="handleClose(tag,index)"
      @click="changeMenu(tag)"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
  >
   {{ tag.label }}
  </el-tag>
  <div class="right-nav">
    <button class="roll-nav roll-right">
      <i class="icon iconfont icon-forward"></i>
    </button>
    <button class="roll-nav roll-right">
      <i class="icon iconfont icon-bars"></i>
    </button>
  </div>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: "CommonTab",
  computed: {
    ...mapState({
      tags: state => state.tab.tabsList
    })
  }
}
</script>

<style lang="scss" scoped>

.roll-nav{
  color: #fff;
  border: 0;
  outline: 0;
  background: #dfdfdf;
}
.right-nav{
  position: absolute;
  right: 0;
  display: inline-block;
}
.roll-left{
}
.el-tag{
  height: 30px;
  line-height: 30px;
  background: #fff;
  color: #009bff ;
  outline: 0;
  border: 0;
  padding: 0 15px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 14px !important;
  vertical-align: bottom;
  i{
    color: #009bff !important;
  }

}
.el-tag--dark .el-tag__close {
  color: #009bff;
}
</style>